<template>
	<view class="box">
		<uni-nav-bar background-color="#3286ed" :statusBar="true" :fixed='true' color="#fff" title="请假详情" left-icon="left"   @clickLeft="backFn"  ></uni-nav-bar>
	<view class="form">
		<view class="top">
			<view class="item text1"> <span>{{form.applyUserName}}</span> <span>提交的外出</span></view>
			<view class="item text2"><span>安徽湿云科技集团有限公司</span></view>
			<view class="item text3"> <span v-if="">审批通过</span> </view>
		</view>
		<view class="body">
			<view class="text1"><span>审批编号</span></view>
			<view class="text2 text">{{form.serialNum}}</view>
			<view class="text1"><span>所在部门</span></view>
			<view class="text2">待获取</view>
			<view class="card">
				<view class="top">
					外出{{form.outgoingTotalTime}}小时
				</view>
				<view class="card_item">
					<u-steps    direction="column">
							<u-steps-item  title="开始时间" :desc="form.leaveStartTime">
							<text class="slot-icon" slot="icon">开</text>
							</u-steps-item>
							<u-steps-item title="结束时间" :desc="form.leaveEndTime">
							<text class="slot-icon" slot="icon">结</text>
							</u-steps-item>
						</u-steps>
						 
				</view>
				<view class="bottom">
					<view class="text1">
						外出事由
					</view>
					<view class="text2">
						{{form.reason}}
					</view>
				</view>
				
			</view>
			<!-- 审批标签 -->
			<view class="tag">
				<u--image   src="../../../../static/images/pass.png" width="80px" height="80px"  ></u--image>
			</view>
			
		</view>
	</view>
	<!-- 审批流程 -->
	<view class="approval">
		<view class="text">
			<span>流程</span>
		</view>
		<view class="liucheng" v-for="(item,index) in approvalList">
			<view class="liucheng_item" >
				<view class="left">
					<u-avatar shape="square" :text="item.approverName.substr(1,2)" fontSize="14" bg-color="#3496fb" ></u-avatar>
				    <view class="icon" v-if="item.typeOperation=='agree'">
				    	<u-icon  name="checkmark-circle-fill" color="#14ba82"></u-icon>
				    </view>
				<view class="center">
					<view class="text1">
						<span>发起申请</span>
					</view>
					<view class="text2">
						<span>{{item.approverName}}</span>
					</view>
				</view>
				</view>
				
				<view class="right">
					{{item.createTime}}
				</view>
				 
			</view>
			<view class="lian" v-if="index/2==0">
				<view class="liane">
					
				</view>
			</view>
		</view>
		
	</view>
	<view class="buttom">
		<view class="kong">
			
			<view class="kong_item">
				<uni-icons color="#606266"  type="chat" size="30"  class="iconBox" style="font-size: 27px;background-color: #fff;"></uni-icons>
				<text style="font-size: 12px;padding-top: 3px;">评论</text>
			</view>
			<view class="kong_item">
				<uni-icons color="#606266"  type="more-filled" size="30"  class="iconBox" style="font-size: 27px;background-color: #fff;"></uni-icons>
				<text style="font-size: 12px;padding-top: 3px;">更多</text>
			</view>
			<view class="kong_item">
				<uni-icons color="#606266"  type="redo" size="30"  class="iconBox" style="font-size: 27px;background-color: #fff;"></uni-icons>
				<text style="font-size: 12px;padding-top: 3px;">分享</text>
			</view>
		</view>
		 <u-button @click="openPop(0)" :plain="true" :hairline="true" class="button bgc"  type="default">拒绝</u-button>
		 <u-button @click="openPop(1)"  class="button"  type="primary">同意</u-button>
		 
	</view>
	<u-popup @close="showProp=false" :round="10"  style="height: 500px;" :overlay="true" :closeable="true" :closeOnClickOverlay="true" :show="showProp" mode="bottom"  >
	        <view class="pop" style="height:600px;">
	          <view class="title">
	          	<span v-if="chackIndex==1">确认同意</span>
	          	<span v-if="chackIndex==0"> 拒绝</span>
	          </view>
			  <view class="form">
			  	<u--textarea v-model="remark" placeholder="请输入内容" height="170px" border="none" ></u--textarea>
			  </view>
			  <view class="tujian">
			  	<view class="top">
			  		<view class="">
			  			<span>推荐回复</span>
			  		</view>
					<view class="icon" v-if="texshow" @click="texshow=false">
						<u-icon  name="eye" color="#bec0c2"></u-icon>
					</view>
					<view class="icon" v-if="!texshow" @click="texshow=true">
						<u-icon  name="eye-off" color="#bec0c2"></u-icon>
					</view>
			  	</view>
				<view class="body" v-if="texshow">
					<view @click="textFn(item)" v-for="(item,index) in showtext" class="text">
						<span>{{item.text}}</span> 
					</view>
				</view>
			  </view>
			  
			  <!-- 确认按钮 -->
			  <view class="button">
			  	<u-button class="button1" v-if="chackIndex==1" type="primary">确认同意</u-button>
				<u-button  class="button1" v-if="chackIndex==0" type="error">确认拒绝</u-button>
			  </view>
	        </view>
		</u-popup>
	</view>
</template>

<script>
	import {listOaLeaveApproval,getOaLeaveApproval,addOaLeaveApproval,updateOaLeaveApproval} from "@/api/OA/leave.js"
	import {getLoginUser,getUserProfile} from '@/api/system/user.js'
	 import {getapprovalRecodeList,editapprovalRecode} from '@/api/approvaRecode.js'
	export default {
		data() {
			return {
				form:{
					
				},
				showProp:false,
				approvalList:[],
				active:0,
				chackIndex:null,
				remark:null,
				textList:[
					{text:'同意'},
					{text:'确认'},
					{text:'OK'},
					{text:'情况属实'},
					{text:'已审核'},
					{text:'好的'},
					{text:'通过'},
					{text:'已核实'},
					{text:'可以'},
				],
				rejected:[
					{text:'拒绝'},
					{text:'不批'},
					{text:'理由不充分'},
					{text:'情况不属实'},
				],
				showtext:[],
				texshow:true,
			};
		},
		created() {
			
		},
		onLoad(e) {
			this.getoutgoingInfo(e)
		},
		methods:{
			// 根据id获取详情
			async getoutgoingInfo(e){
				let res=await getOaLeaveApproval(e.id)
				this.form=res.data
				await this.getapprovalList()
				
			},
			// 获取审批人
			getapprovalList(){
				getapprovalRecodeList({serialNum:this.form.serialNum}).then(res=>{
					if(res){
						var arr=res.rows
						for(var i=0;i<arr.length;i++){
						  for(var j=i+1;j<arr.length;j++){
						    //如果第一个比第二个大，就交换他们两个位置
						    if( arr[i].sequence>arr[j].sequence){
						      var temp = arr[i];
						      arr[i] = arr[j];
						      arr[j] = temp;
						    }
						  }
						}
						this.approvalList=arr
						 this.active=1
						  // this.approvalList.forEach(item=>{
								// 				if(item.approvalStatus==="completed"){
								// 					this.active++
								// 				}
								// 			})
						
					}
				})
			},
			 // 打开pop
			 openPop(val){
				 this.chackIndex=val
				this.showProp=true 
				if(val==0){
					this.remark="拒绝"
					this.showtext=this.rejected
					
				}else{
					this.remark="同意"
					this.showtext=this.textList
				}
			 },
			 // 推荐回复
			 textFn(val){
				 this.remark=null
				 this.remark=val.text
			 },
			// 返回
				backFn(){
					uni.navigateBack({delta:1})
				}
			
		}
	}
</script>

<style lang="scss">
.box{
		
	
.form{
	margin-top: 5px;
	.top{
		background-color: #fff;
		padding: 10px;
		.item{
			
		}
		.text1{
			font-size: 18px;
			font-weight: 700px;
			
			
		}
		.text2{
			font-size: 14px;
			color: #bec0c2;
			padding: 3px 0;
		}
		.text3{
			font-size: 12px;
			color: #1dcf67;
			padding-top: 5px;
		}
	}
	.body{
		background-color: #fff;
		margin-top: 10px;
		margin-bottom: 10px;
		padding: 10px;
		position: relative;
		.tag{
			 position: absolute;
			 right: 0px;
			 top: 0px;
		}
			.text1{
				font-size: 14px;
				color: #bec0c2;
		       }
			   .text2{
				   font-size: 15px;
				   margin: 7px 0;
			   }
			   .text{
				   letter-spacing:0.2em
			   }
			   .card{
				   
				   height: 220px;
				   background-color: #fff;
				   
				  .top{
					 font-size: 18px;
				  }
				  .bottom{
					  padding-top: 8px;
					  .text1{
						  font-size: 13px;
						  color: #bec0c2;
					  }
					  .text2{
						  font-size: 14px;
					  }
				  }
				  
			   }
			  .card_item{
			  				 padding: 10px;
			  				 height: 120px;
			  				 border-radius: 10px;
			  				 background-color: #e8eaeb;
							/deep/.u-steps-item__wrapper[data-v-3ae6176e]{
								background-color: #e8eaeb;
							}
							/deep/.u-text__value--tips[data-v-50004b49]{
								color: #3286ed;
							}
			  			.slot-icon {
			  					width: 21px;
			  					height: 21px;
			  					background-color: #3286ed;
			  					border-radius: 100px;
			  					font-size: 12px;
			  					color: #fff;
			  					line-height: 21px;
			  					text-align: center;
			  				}	  
			  } 
	}
}
.buttom{
	background-color: #fff;
	position: fixed;
	bottom: 0;
	width: 100%;
	height: 90px;
	padding-top: 20px;
	display: flex;
	justify-content: flex-end;
	
	.button{
		
		width: 60px;
		height: 30px;
		
	}
	/deep/.u-button{
		margin-top: 20px;
	}
	.bgc{
		background-color: #fff;
		border: #8b8b8b solid 1px
	}
	.kong{
		width: 180px;
		height: 100%;
		display: flex;
		padding: 0 6px;
		
		justify-content: space-between;
		.kong_item{
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items:center;
		}
	}
}
.approval{
	background-color: #fff;
	padding: 10px 10px;
	.text{
		padding-bottom: 15px;
		font-size: 14px;
		font-weight: 550;
	}
	.lian{
		width: 100%;
		padding: 4px 0;
		.liane{
			height: 30px;
			width: 2px;
			margin-left: 18px;
			background-color: #bec0c2;
		}
	}
	.liucheng{
		.liucheng_item{
			display: flex;
			justify-content: space-between;
			.left{
				display: flex;
				justify-content: space-between;
				position: relative;
				.icon{
					position: absolute;
					left: 32px;
					bottom: 0px;
					background-color: #fff;
					border-radius: 50%;
				}
				.center{
					padding: 0 10px;
					.text1{
						font-size: 13px;color: #bec0c2;
						padding: 1px;
					}
					.text2{
						font-size: 17px;
						padding: 1px;
						
					}
				}
			}
		}
		.right{
			
			color: #bec0c2;
		}
	}	
}
}
.pop{
	position: relative;
	.title{
		text-align: center;
		padding-top: 5px;
		font-size: 16px;
		font-weight: 550;
	}
	.tujian{
		padding: 15px;
		.top{
			font-size: 12px;
			color: #bec0c2;
			display: flex;
			justify-content: space-between;
		}
		.body{
			display: flex;
			
			flex-wrap: wrap;
			.text{
				
				margin: 5px;
				padding: 4px 5px;
				border-radius: 2px;
				font-size: 12px;
				background-color: #ebebeb;
			}
		}
	}
	.button{
		width: 100%;
		position: absolute;
		bottom: 10px;
		text-align: center;
		.button1{
			width: 300px;
			border-radius: 10px;
			padding: 0 20px;
		}
	}
}
</style>
